<template><!--学习概况-->
    <div class="warp-2" style="height: 100%;width: 100%;overflow: auto;position: absolute">
            <navbar :title="$t('set_privacy_learning_situation')"></navbar>
            <div class="white-bg" style="margin-top: 56px;">
                <p class="color999 font-size10" style="padding: 15px 15px 20px;" v-if="learningSituation.lsUpdateTime">{{ $t('last_update_time') }}：{{ (learningSituation.lsUpdateTime) | substringTime }}</p><!--上次更新时间-->
                <p class="color999 font-size10" style="padding: 15px 15px 20px;" v-if="!learningSituation.lsUpdateTime">{{ $t('last_update_time') }}：--</p><!--上次更新时间-->
                <div class="paddingLR15">
                    <p class="font-size15" style="font-weight:bold;">{{ $t('personal_ls_situation_view') }}</p><!--概况-->
                    <ul class="module-box-26 clearfix">
                        <li>
                            <p>{{ learningSituation.lsLearnDuration ? (TimeConversion(learningSituation.lsLearnDuration).toFixed(2) == 0.00 ? 0 : TimeConversion(learningSituation.lsLearnDuration).toFixed(2)) : 0 }}</p>
                            <div>{{ $t('personal_Learning_time') }}</div><!--学习时长-->
                        </li>
                        <i></i>
                        <li>
                            <p>{{ learningSituation.lsLearnCredit || 0}}</p>
                            <div>{{ $t('personal_ls_learn_credits') }}</div><!--总学分-->
                        </li>
                        <i></i>
                        <li>
                            <p>{{ learningSituation.lsTotalIntegral || 0}}</p>
                            <div>{{ $t('personal_learning_total') }}</div><!--总学习积分-->
                        </li>
                    </ul>
                </div>
                <div class="paddingLR15">
                    <p><span class="font-size15" style="font-weight:bold;">{{ $t('personal_ls_course_count') }}</span><span class="color999 margin-left5">({{ learningSituation.lsTotalCourses ? learningSituation.lsTotalCourses : '0' }})</span></p><!--课程总数-->
                    <div class="clearfix">
                        <div class="myCourseChart" v-show="learningSituation.lsTotalCourses && learningSituation.lsTotalCourses !== 0">
                            <div style="width: 180px;height: 200px;" ref="myCourseTotalChart"></div>
                        </div>
                        <div style="float: left;" v-if="!learningSituation.lsTotalCourses || learningSituation.lsTotalCourses == 0">
                            <div style="padding: 40px;">
                                <div class="pie-nodata-01">
                                    <div class="pie-nodata-02"></div>
                                </div>
                            </div>
                        </div>
                        <div style="float: left;padding-top: 40px;">
                            <p class="margin-bottom10"><span class="bg-circle-green"></span><span class="margin-right5">{{ $t('cos_app_completed') }}</span><span class="color999">({{ learningSituation.lsCourseCompletedNum ? this.learningSituation.lsCourseCompletedNum : '0' }})</span></p><!--已完成-->
                            <p class="margin-bottom10"><span class="bg-circle-yellow"></span><span class="margin-right5">{{ $t('cos_app_fail') }}</span><span class="color999">({{ learningSituation.lsCourseFailNum ? this.learningSituation.lsCourseFailNum : '0' }})</span></p><!--未完成-->
                            <p class="margin-bottom10"><span class="bg-circle-blue"></span><span class="margin-right5">{{ $t('cos_app_inprogress') }}</span><span class="color999">({{ learningSituation.lsCourseInprogressNum ? this.learningSituation.lsCourseInprogressNum : '0' }})</span></p><!--进行中-->
                            <p><span class="bg-circle-red"></span><span class="margin-right5">{{ $t('cos_app_pending') }}</span><span class="color999">({{ learningSituation.lsCoursePendingNum ? this.learningSituation.lsCoursePendingNum : '0' }})</span></p><!--审批中-->
                        </div>
                    </div>
                </div>
                <div class="paddingLR15"><!--考试总数-->
                    <p><span class="font-size15" style="font-weight:bold;">{{ $t('personal_ls_exam_count') }}</span><span class="color999 margin-left5">({{ learningSituation.lsTotalExams ? learningSituation.lsTotalExams : '0' }})</span></p>
                    <div class="clearfix">
                        <div class="myCourseChart" v-show="learningSituation.lsTotalExams && learningSituation.lsTotalExams !== 0">
                            <div style="width: 180px;height: 200px;" ref="myExamTotalChart"></div>
                        </div>
                        <div style="float: left;" v-if="!learningSituation.lsTotalExams || learningSituation.lsTotalExams == 0">
                            <div style="padding: 40px;">
                                <div class="pie-nodata-01">
                                    <div class="pie-nodata-02"></div>
                                </div>
                            </div>
                        </div>
                        <div style="float: left;padding-top: 40px;">
                            <p class="margin-bottom10"><span class="bg-circle-green"></span><span class="margin-right5">{{ $t('cos_app_completed') }}</span><span class="color999">({{ learningSituation.lsExamCompletedNum ? this.learningSituation.lsExamCompletedNum : '0' }})</span></p><!--已完成-->
                            <p class="margin-bottom10"><span class="bg-circle-yellow"></span><span class="margin-right5">{{ $t('cos_app_fail') }}</span><span class="color999">({{ learningSituation.lsExamFailNum ? this.learningSituation.lsExamFailNum : '0' }})</span></p><!--未完成-->
                            <p class="margin-bottom10"><span class="bg-circle-blue"></span><span class="margin-right5">{{ $t('cos_app_inprogress') }}</span><span class="color999">({{ learningSituation.lsExamInprogressNum ? this.learningSituation.lsExamInprogressNum : '0' }})</span></p><!--进行中-->
                            <p><span class="bg-circle-red"></span><span class="margin-right5">{{ $t('cos_app_pending') }}</span><span class="color999">({{ learningSituation.lsExamPendingNum ? this.learningSituation.lsExamPendingNum : '0' }})</span></p><!--审批中-->
                        </div>
                    </div>
                </div>
                <div><!--社区-->
                    <p class="font-size15 paddingLR15" style="font-weight:bold;">{{ $t('personal_ls_sns') }}</p>
                    <div style="padding: 20px 0 25px;">
                        <p class="font-size14 paddingLR15"><i class="my-icon"></i>{{ $t('personal_my') }}</p><!--我的-->
                        <ul class="module-box-27 clearfix">
                            <li>
                                <div class="box-table">
                                    <div class="box-table-cell">
                                        <p class="font-size12">{{ learningSituation.lsFansNum ? learningSituation.lsFansNum : '0' }}</p>
                                        <p class="font-size11 color999">{{ $t('personal_ls_fans') }}</p><!--粉丝-->
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-table">
                                    <div class="box-table-cell">
                                        <p class="font-size12">{{ learningSituation.lsAttentionNum ? learningSituation.lsAttentionNum : '0' }}</p>
                                        <p class="font-size11 color999">{{ $t('personal_ls_sns_attention') }}</p><!--关注-->
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-table">
                                    <div class="box-table-cell">
                                        <p class="font-size12">{{ learningSituation.lsPraisedNum ? learningSituation.lsPraisedNum : '0' }}</p>
                                        <p class="font-size11 color999">{{ $t('personal_ls_sns_praised') }}</p><!--被赞-->
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-table">
                                    <div class="box-table-cell">
                                        <p class="font-size12">{{ learningSituation.lsPraiseOthersNum ? learningSituation.lsPraiseOthersNum : '0' }}</p>
                                        <p class="font-size11 color999">{{ $t('personal_ls_sns_praise_others') }}</p><!--赞他人-->
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-table">
                                    <div class="box-table-cell">
                                        <p class="font-size12">{{ learningSituation.lsCollectNum ? learningSituation.lsCollectNum : '0' }}</p>
                                        <p class="font-size11 color999">{{ $t('personal_ls_sns_collect') }}</p><!--收藏-->
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div style="padding: 20px 0 25px;">
                        <p class="font-size14 paddingLR15"><i class="knowledge-icon"></i>{{ $t('personal_ls_knowledge') }}</p><!--知识-->
                        <ul class="module-box-27 clearfix">
                            <li>
                                <div class="box-table">
                                    <div class="box-table-cell">
                                        <p class="font-size12">{{ learningSituation.lsShareCount ? learningSituation.lsShareCount : '0' }}</p>
                                        <p class="font-size11 color999">{{ $t('knowledge_share') }}</p><!--我的分享-->
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-table">
                                    <div class="box-table-cell">
                                        <p class="font-size12">{{ learningSituation.lsAccessCount ? learningSituation.lsAccessCount : '0' }}</p>
                                        <p class="font-size11 color999">{{ $t('personal_ls_browsed') }}</p><!--我浏览的-->
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
export default {
    name: 'LearningProfile',
    components: {
    },
    data() {
        return {
            learningSituation: {},
            encId: '', //获取用户id
            colors: ['#ffd824', '#5186f0', '#fc355d', '#00af78'],
            isLoading: true,
            courseTotalNum: [],
            examTotalNum: []
        };
    },
    methods: {
        getData() {
            let _this = this;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/learning/situation`
            }).then(res => {
                this.learningSituation = res.data;
                this.courseTotalNum = [];
                if (this.learningSituation.lsTotalCourses !== 0) {
                    this.courseTotalNum = [
                        { value: this.learningSituation.lsCourseFailNum, name: this.$t('cos_app_fail'), itemStyle: {color: _this.colors[0]} },
                        { value: this.learningSituation.lsCourseInprogressNum, name: this.$t('cos_app_inprogress'), itemStyle: {color: _this.colors[1]} },
                        { value: this.learningSituation.lsCoursePendingNum, name: this.$t('cos_app_pending'), itemStyle: {color: _this.colors[2]} },
                        { value: this.learningSituation.lsCourseCompletedNum, name: this.$t('cos_app_completed'), itemStyle: {color: _this.colors[3]} }
                    ];
                }

                // 基于准备好的dom，初始化echarts实例
                let myCourseTotalChart = this.$echarts.init(this.$refs.myCourseTotalChart);
                // 绘制图表
                myCourseTotalChart.setOption(this.setCourseTotalChart(this.courseTotalNum));

                this.examTotalNum = [];
                if (this.learningSituation.lsTotalExams !== 0) {
                    this.examTotalNum = [
                        { value: this.learningSituation.lsExamFailNum, name: this.$t('cos_app_fail'), itemStyle: {color: _this.colors[0]} },
                        { value: this.learningSituation.lsExamInprogressNum, name: this.$t('cos_app_inprogress'), itemStyle: {color: _this.colors[1]} },
                        { value: this.learningSituation.lsExamPendingNum, name: this.$t('cos_app_pending'), itemStyle: {color: _this.colors[2]} },
                        { value: this.learningSituation.lsExamCompletedNum, name: this.$t('cos_app_completed'), itemStyle: {color: _this.colors[3]} }
                    ];
                }

                // 基于准备好的dom，初始化echarts实例
                let myExamTotalChart = this.$echarts.init(this.$refs.myExamTotalChart);
                // 绘制图表
                myExamTotalChart.setOption(this.setCourseTotalChart(this.examTotalNum));

                //更新课程总数数量
                let completedNumInterVal = setInterval(() => {
                    let completedNumObj = document.getElementById('completedNum');
                    if (completedNumObj) {
                        clearInterval(completedNumInterVal);
                        completedNumObj.innerHTML = _this.learningSituation.lsCourseCompletedNum;
                    }
                }, 100);
                this.isLoading = false;
            });
        },
        TimeConversion(time) {
            time = time / 60 / 60;
            return time;
        },
        setCourseTotalChart(dataList) {
            let option = {
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        emphasis: {
                            disabled: true
                        },
                        data: dataList
                    }
                ]
            };
            return option;
        }
    },
    mounted() {
        this.encId = this.$route.params.encId; //用户id
        this.getData();
    }
};
</script>

<style scoped lang="less">
    .module-box-26 {
        padding: 25px 0 40px;
        li {
            float: left;
            width: calc((100% - 2px) / 3);
            text-align: center;
            p {
                font-size: 16px;
                padding-bottom: 10px;
            }
            div {
                font-size: 12px;
            }
        }
        i {
            float: left;
            border-right: 1px solid #e5e5e5;
            height: 25px;
            margin: 9px 0 0 0;
        }
    }
    .my-icon:before, .group-icon:before, .answer-icon:before, .knowledge-icon:before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 14px;
        background: url(./images/learning-profile.png) no-repeat 0 -5px;
        background-size: 12px;
        margin-bottom: -1px;
    }
    .group-icon:before {
        background-position: 0 -40px;
        background-size: 16px;
    }
    .answer-icon:before {
        background-position: 0 -61px;
        background-size: 14px;
    }
    .knowledge-icon:before {
        background-position: 0 -90px;
        background-size: 14px;
    }
    .module-box-27 {
        padding: 5px 5px 0 3px;
        li {
            float: left;
            width: calc((100% - 20px) / 2);
            height: 56px;
            background: #fafafa;
            margin: 10px 10px 0 0;
            padding: 0 0 0 15px;
            box-sizing: border-box;
            .box-table {
                width: 100%;
                height: 100%;
            }
        }
    }
    .bg-circle-green {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #00af78;
        margin-right: 5px;
    }
    .bg-circle-yellow {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffd824;
        margin-right: 5px;
    }
    .bg-circle-blue {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #5186f0;
        margin-right: 5px;
    }
    .bg-circle-red {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fc355d;
        margin-right: 5px;
    }
    .pie-nodata-01 {
        width: 100px;
        height: 100px;
        background: #f5f5f5;
        border-radius: 50%;
    }
    .pie-nodata-02 {
        display: inline-block;
        width: 70px;
        height: 70px;
        background: #ffffff;
        border-radius: 50%;
        margin: 15px;
    }
    .myCourseChart {
        width: 180px;
        height: 200px;
        float: left;
    }
</style>
